<template>
	<view class="group-buy-box" v-if="groupBuyList.length > 0">
		<view class="group-title">
			<text class="title-img" ></text>
			<text class="iconfont iconright"  @click="entryGrooupBuyList()" >查看更多</text>
		</view>
		<view class="group-buy-goods-box">
			<view class="goods-border" v-for="(item, index) in groupBuyList" :key="index">
				<view class="group-buy-goods">
					<view class="goods-img">
						<image :src="$util.img(item.picture.pic_cover_small)"></image>
					</view>
					<text class="goods-name">{{ item.goods_name }}</text>
					<view class="goods-price">
						<view class="yuan-price">
							原价:
							<text>{{ item.promotion_price }}</text>
						</view>
						<view class="group-price">
							团购价:
							<text>{{ item.group_price }}</text>
						</view>
					</view>
					<text class="get-detail" @click="entryGrooupBuyDetail(item.goods_id)">查看详情</text>
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
export default{
	name : 'diy-group-buy',
	mixins: [http],
	data(){
		return {
			groupBuyList : [],
		}
	},
	created() {
		this.getgroupBuyList();
	},
	methods:{
		getgroupBuyList(){
			this.sendRequest({
				url: 'NsGroupBuy.GroupBuy.goodsList',
				data: {
					page_size : 2,
				},
				success: res => {
					let data = res.data;
					if(data.data.length > 0){
						this.groupBuyList = data.data;
					}
				}
			})
		},
		
		entryGrooupBuyDetail(goodsId){
			this.$util.redirectTo('/promotionpages/groupbuy/detail/detail', { goods_id: goodsId });
		},
		
		entryGrooupBuyList(){
			this.$util.redirectTo('/promotionpages/groupbuy/list/list');
		}	
	}
}
</script>

<style lang="scss">
.group-buy-box{
	overflow: hidden;
	margin-bottom:20rpx;
	.group-title{
		line-height: 1;
		padding: 20rpx;
		position: relative;
		.title-img{
			width: 160rpx;
			height: 35rpx;
			display: inline-block;
			margin-right: 20rpx;
			background: url() center no-repeat;
			background-size: 100% 100%;
		};
		.iconfont{
			position: absolute;
			right: 20rpx;
			font-size: 24rpx;
			padding-right: 28rpx;
			color: #ff0036;
			line-height: 35rpx;
		};
		.iconfont:before {
		position: absolute;
		right: 0px;		
		}
	};
	.group-buy-goods-box{
		padding:0rpx 20rpx;
		margin-bottom: 20rpx;
		.goods-border{
			padding: 20rpx;
			border: 1rpx solid #e5e5e5;
			.group-buy-goods{
				position: relative;
				overflow: hidden;
				.goods-img{
					width:200rpx;
					height:200rpx;
					float: left;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				};
				.goods-name{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size:24rpx;
					font-weight: bold;
				};
				.goods-price{
					
					.yuan-price{
						font-size:24rpx;
						display:inline-block;
						text{
							text-decoration: line-through;
							color:#898989;
							margin-left: 10rpx;
							margin-right: 20rpx;
						}
					}
					.group-price{
						font-size:24rpx;
						display:inline-block;
						color:#FF0036;
						text{
							margin-left: 10rpx;
						}
					}
				};
				.get-detail{
					position: absolute;
					background: #FF0036;
					color: #fff;
					font-size: 22rpx;
					padding: 6rpx 10rpx;
					border-radius: 12rpx;
					right: 0rpx;
					bottom: 0rpx;
				}
			}		
		}
	}
}
</style>
